<!DOCTYPE html>
<head>
	<title>DLShouWen Grid - 示例</title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<!-- jQuery -->
	<script type="text/javascript" src="../../../dependents/jquery/jquery.min.js"></script>
	<!-- bootstrap -->
	<script type="text/javascript" src="../../../dependents/bootstrap/js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../../../dependents/bootstrap/css/bootstrap.min.css" />
	<!--[if lt IE 9]>
		<script src="../../../dependents/bootstrap/plugins/ie/html5shiv.js"></script>
		<script src="../../../dependents/bootstrap/plugins/ie/respond.js"></script>
	<![endif]-->
	<!--[if lt IE 8]>
		<script src="../../../dependents/bootstrap/plugins/ie/json2.js"></script>
	<![endif]-->
	<!-- font-awesome -->
	<link rel="stylesheet" type="text/css" href="../../../dependents/fontAwesome/css/font-awesome.min.css" media="all" />
	<!-- DLShouWen Grid -->
	<script type="text/javascript" src="../../../dlshouwen.grid.js"></script>
	<script type="text/javascript" src="../../../i18n/en.js"></script>
	<script type="text/javascript" src="../../../i18n/zh-cn.js"></script>
	<script type="text/javascript" src="../../../i18n/zh-tw.js"></script>
	<link rel="stylesheet" type="text/css" href="../../../dlshouwen.grid.min.css" />
	<!-- datePicker -->
	<script type="text/javascript" src="../../../dependents/datePicker/WdatePicker.js" defer="defer"></script>
	<link rel="stylesheet" type="text/css" href="../../../dependents/datePicker/skin/WdatePicker.css" />
	<link rel="stylesheet" type="text/css" href="../../../dependents/datePicker/skin/default/datepicker.css" />
	<!-- toTop -->
	<script type="text/javascript" src="../../toTop/jquery.toTop.js"></script>
	<link rel="stylesheet" type="text/css" href="../../toTop/jquery.toTop.css" />
	<!-- syntaxHighLighter -->
	<script type="text/javascript" src="../../syntaxHighLighter/scripts/shCore.js"></script>
	<script type="text/javascript" src="../../syntaxHighLighter/scripts/shBrushBash.js"></script>
	<script type="text/javascript" src="../../syntaxHighLighter/scripts/shBrushXml.js"></script>
	<script type="text/javascript" src="../../syntaxHighLighter/scripts/shBrushJScript.js"></script>
	<link rel="stylesheet" type="text/css" href="../../syntaxHighLighter/styles/shCore.css" />
	<link rel="stylesheet" type="text/css" href="../../syntaxHighLighter/styles/shThemeDefault.css" />
	<!-- jquery pin -->
	<script type="text/javascript" src="../../jquery.pin/jquery.pin.js"></script>
	<!-- doc css -->
	<link rel="stylesheet" type="text/css" href="../../css/doc.css" />
	<!-- icon css -->
	<link rel="stylesheet" type="text/css" href="../../css/icons.css" />
	<script type="text/javascript">
	//映射内容
	var sex = {1:'男', 2:'女'};
	var degree = {1:'小学', 2:'初中', 3:'高中', 4:'中专', 5:'大学', 6:'硕士', 7:'博士', 8:'其他'};
	//模拟数据（薪水在6000-12000之间，日期在1980-01-01 00::00:00到2014-10-01 00:00:00之间）
	var datas = new Array();
	for(var i=0; i<186; i++){
		var user = new Object();
		user.user_id = 'user_'+i;
		user.user_code = 'user_'+i;
		user.user_name = '模拟用户'+(Math.floor(Math.random()*1000)+10000)+'号';
		user.sex = (Math.floor(Math.random()*2)+1);
		user.salary = (Math.floor(Math.random()*6000)+6000);
		if(i==0){
			user.salary = 0;
		}
		user.degree = (Math.floor(Math.random()*8)+1);
		user.time = new Date(Math.floor(Math.random()*1096588800000)+315504000000);
		user.time_stamp_s = Math.floor((Math.floor(Math.random()*1096588800000)+315504000000)/1000);
		user.time_stamp_ms = Math.floor(Math.random()*1096588800000)+315504000000;
		user.string_date = $.fn.dlshouwen.grid.tools.dateFormat(new Date(Math.floor(Math.random()*1096588800000)+315504000000), 'yyyy-MM-dd');
		user.string_time = $.fn.dlshouwen.grid.tools.dateFormat(new Date(Math.floor(Math.random()*1096588800000)+315504000000), 'yyyy-MM-dd hh:mm:ss');
		datas.push(user);
	}
	</script>
</head>
<body>
	<script type="text/javascript">
	var gridColumns_2_1_1 = [
 		{id:'user_code', width:180, title:'用户编号', type:'string', columnClass:'text-center'},
 		{id:'user_name', title:'用户名称', type:'string', columnClass:'text-center'},
 		{id:'sex', title:'性别', type:'string', codeTable:sex, columnClass:'text-center', hideType:'xs'},
 		{id:'salary', title:'薪水', type:'number', format:'#,###.00', columnClass:'text-center', hideType:'xs'},
 		{id:'degree', title:'学历', type:'string', codeTable:degree, columnClass:'text-center', hideType:'sm|xs'},
 		{id:'time', title:'日期对象', type:'date', format:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center', hideType:'md|sm|xs'},
 		{id:'time_stamp_s', title:'秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'time_stamp_s', columnClass:'text-center'},
 		{id:'time_stamp_ms', title:'毫秒级时间戳', type:'date', format:'yyyy-MM-dd hh:mm:ss S', otype:'time_stamp_ms', columnClass:'text-center'},
 		{id:'string_date', title:'日期格式字符串', type:'date', format:'yyyy-MM-dd', otype:'string', oformat:'yyyy-MM-dd', columnClass:'text-center'},
 		{id:'string_time', title:'时间格式字符串', type:'date', format:'yyyy-MM-dd hh:mm:ss', otype:'string', oformat:'yyyy-MM-dd hh:mm:ss', columnClass:'text-center'}
 	];
 	var gridOption_2_1_1 = {
 		lang : 'zh-cn',
 		ajaxLoad : false,
 		check : true,
 		checkWidth : '40',
 		exportFileName : '用户列表',
 		datas : datas,
 		columns : gridColumns_2_1_1,
 		gridContainer : 'gridContainer_2_1_1',
		toolbarContainer : 'gridToolBarContainer_2_1_1',
		pageSize : 10,
		pageSizeLimit : [10, 20, 50]
 	};
 	var grid_2_1_1 = $.fn.dlshouwen.grid.init(gridOption_2_1_1);
 	$(function(){
 		//grid_2_1_1.load();
 	});
	</script>
	<div id="gridContainer_2_1_1" class="dlshouwen-grid-container"></div>
	<div id="gridToolBarContainer_2_1_1" class="dlshouwen-grid-toolbar-container"></div>
	<script type="text/javascript">
	function extendTr(id){
		$('#tbody_'+id).toggle(300);
	}
	</script>
	<table class="table table-border">
		<theader>
			<tr>
				<th>1</th>
				<th>2</th>
				<th>3</th>
				<th>4</th>
				<th>5</th>
			</tr>
		</theader>
		<tbody>
			<tr><td><a href="javascript:;" onclick="extendTr('1');">展开/合并</a></td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
		</tbody>
		<tbody id="tbody_1" style="display:none;">
			<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
			<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
			<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
			<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
			<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
			<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
			<tr><td>1</td><td>1</td><td>1</td><td>1</td><td>1</td></tr>
		</tbody>
		<tbody>
			<tr><td><a href="javascript:;" onclick="extendTr('2');">展开/合并</a></td><td>2</td><td>2</td><td>2</td><td>2</td></tr>
		</tbody>
		<tbody id="tbody_2" style="display:none;">
			<tr><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td></tr>
			<tr><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td></tr>
			<tr><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td></tr>
			<tr><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td></tr>
			<tr><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td></tr>
			<tr><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td></tr>
			<tr><td>2</td><td>2</td><td>2</td><td>2</td><td>2</td></tr>
		</tbody>
	</table>
</body>
</html>